<template>
<div class="tw-labellists">
  <template v-if="list.length > 0">
    <ul class="tw-labellist" :style="style">
     <li v-for="(item,idx) in list"
      :key="idx" @click="handleClick(item)"
      class="tw-labellist-item"
      :class="{active: item.val && item.val===curvalue}">

      <template v-if="hasBeforeDot">
        <i class="tw-labellist-item-dot"
          :class="{'xcircle': dotType === 'circle'}"></i>
      </template>

      <label :style="labelStyle" v-show="item.label">{{item.label}}:</label>
      <span v-html="item.value" :class="{xnowrap: !wrap}"></span>
     </li>
     <a :href="moreLink" v-if="showMore"> 更多></a>
   </ul>
  </template>
  <tw-lib-nodata v-if="mulLine && list.length===0" />
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import nodata from '../tw-lib-base/no-data/no-data'
import padding from '../tw-lib-base/padding/mixins'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'header-navigate',

  props,

  mixins: [style, nodata, padding, border],
  data () {
    return {
      curvalue: ''
    }
  },

  created () {
    if (this.valueObject && this.value) {
      this.curvalue = this.value.val
    } else {
      this.curvalue = this.value
    }
  },

  computed: {
    style () {
      return Object.assign({
        lineHeight: this.lineHeight,
        fontFamily: this.fontFamily,
        fontSize: this.fontSize,
        color: this.color
      }, this.borderStyle, this.paddingStyle)
    },

    labelStyle () {
      return {
        width: this.labelWidth,
        paddingRight: this.labelPaddingRight,
        textAlign: this.labelAlign,
        fontSize: this.labelFontSize,
        color: this.labelColor,
        fontWeight: this.labelFontWeightIsBold ? '700' : '400'
      }
    }
  },

  methods: {
    setStyle () {
      let style = ''
      if (this.mulLine) {
        let n = this.lineNum + 'n+0'
        style += `
          ::root.tw-labellists .tw-labellist {
            display: flex;
            flex-wrap: wrap;
          }

          ::root.tw-labellists .tw-labellist-item {
            align-items: center;
            width: ${this.itemWidth};
            padding: ${this.padding};
            border-radius:  ${this.labelRadius};
            margin-right: ${this.labelLeft};
            margin-bottom: ${this.labelTop};
          }
          ::root.tw-labellists .tw-labellist-item:nth-child(${n}) {
            margin-right: 0;
          }

          ::root.tw-labellists .tw-labellist-item .tw-labellist-item-dot {
            background-color: ${this.dotColor};
          }

        `
      }

      if (this.useClickfn) {
        style += `
          ::root.tw-labellists .tw-labellist-item {
            cursor: pointer;
          }

          ::root.tw-labellists .tw-labellist-item:hover,
          ::root.tw-labellists .tw-labellist-item.active {
            background-color: ${this.actBgColor};
          }

          ::root.tw-labellists .tw-labellist-item:hover .tw-labellist-item-dot,
          ::root.tw-labellists .tw-labellist-item.active .tw-labellist-item-dot {
            background-color: ${this.dotActColor};
          }

        `
      }

      if (this.exScrollbar) {
        style += `
          ::-webkit-scrollbar {
            width: 10px;
          }

          ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 10px;
          }

          ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0,82,217,0.5);
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
          }

          ::-webkit-scrollbar-thumb:hover {
            border-radius: 10px;
            background: rgba(0,82,217,1);
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
          }
        `
      }

      if (this.showMore) {
        style += `
          ::root.tw-labellists .tw-labellist a {
            width: ${this.labelWidth};
            padding-right: ${this.labelPaddingRight};
            text-align: ${this.labelAlign};
            font-size: ${this.labelFontSize};
            color: ${this.labelColor};
            font-weight: ${this.labelFontWeightIsBold ? '700' : '400'};
          }

          ::root.tw-labellists .tw-labellist a:hover {
            color: ${this.moreColor};
          }
        `
      }

      this.addStyle(style)
    },
    handleClick(item) {
      if (this.useClickfn) {
        this.curvalue = item.val
        if (this.valueObject) {
          this.$emit('input', item)
          this.$emit('change', item)
        } else if (item.val && item.val !== this.curvalue) {
          this.$emit('input', this.curvalue)
          this.$emit('change', this.curvalue)
        }
      }
    },
    getQueryVariable (variable) {
      let href = window.location.href
      let query = href.substring(href.indexOf('?') + 1)
      let vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return ''
    }
  },
  watch: {
    value () {
      if (this.valueObject && this.value) {
        this.curvalue = this.value.val
      } else if (this.curvalue !== this.value) {
        this.curvalue = this.value
      }
    },
    list: {
      deep: true,
      handler () {
        if (this.useClickfn && this.list.length > 0) {
          let labelid = this.getQueryVariable('labelid')
          if (labelid) {
            this.curvalue = labelid
            this.$emit('input', this.curvalue)
            this.$emit('change', this.curvalue)
          } else {
            this.handleClick(this.list[0])
          }
        }
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
